<template>
  <div class="app-container">
    <div class="filter-container">
      <el-cascader
        v-model="region"
        class="filter-item"
        :options="provinces"
        :props="{
          children:'city',
          label:'name',
          value:'name'
        }"
        placeholder="地区"
        clearable
        @change="getList"
      />
      <el-cascader
        v-model="positionType"
        :options="positionOption"
        class="filter-item"
        :props="{
          children:'children',
          label:'name',
          value:'name'
        }"
        placeholder="职位类型"
        clearable
        @change="getList"
      />
      <el-input v-model="listQuery.keyword" placeholder="查询内容" style="width: 200px;" class="filter-item" clearable @keyup.enter.native="getList" />
      <el-button v-waves style="margin-left: 10px;" type="primary" icon="el-icon-search" @click="getList">
        搜索
      </el-button>
    </div>
    <div style="display: flex;flex-direction: column;align-items: center;justify-content: flex-start;margin: 20px;">
      <div v-for="(item,index) in positionList" class="positions">
        <div class="position-item">
          <div style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;width: 100%;" @click="toDetail(item.id)">
            <div style="display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start">
              <div class="position-item-name text-primary">
                {{ item.name }}
              </div>
              <div class="position-item-detail text-info">
                <span class="position-detail">{{ item.label }}</span>

              </div>
            </div>
            <div style="display: flex;flex-direction: column;align-items: center;justify-content: flex-start" class="text-warning position-item-wage">
              {{ item.wageMin }}-{{ item.wageMax }}元/月
            </div>
          </div>
          <div style="width: 99%;margin: 0 auto"><el-divider style="margin: 0"><span class="text-primary" /></el-divider></div>
          <div class="position-item-com" @click="toCom(item.company.id)">
            <el-image class="com-icon" :src="item.company.logo" />
            <div class="com-name">{{ item.company.name }}</div>
            <div class="com-detail text-info">{{ item.company.label }}</div>

          </div>
        </div>
      </div>
    </div>
    <div class="advertisement text-info">
      <el-image v-if="searchAd.length >= 1 && searchAd[0].url.length > 0" :src="searchAd[0].url" fit="scale-down" />
      <span v-else >广告位招租</span>
    </div>
    <div class="advertisement text-info" style="top: 580px; height: 400px">
      <el-image v-if="searchAd.length >= 2 && searchAd[1].url.length > 0" :src="searchAd[1].url" fit="scale-down" />
      <span v-else >广告位招租</span>
    </div>
    <!--    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />-->

  </div>
</template>

<script>
import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils'
import { provinces } from '@/utils/provinceCity'
import Pagination from '@/components/Pagination'
import { getPositionList, getPositionOption } from '@/api/position'
import { getAd } from '@/api/ad'

const calendarTypeOptions = [
  { key: 'id', display_name: '学号' },
  { key: 'username', display_name: '用户名' },
  { key: 'name', display_name: '姓名' },
  { key: 'gender', display_name: '性别' },
  { key: 'orgNames', display_name: '社团' },
  { key: 'positions', display_name: '职位' }
]

const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.display_name
  return acc
}, {})

export default {
  name: 'ComplexTable',
  components: { Pagination },
  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        '活跃': 'success',
        '离队': 'danger',
        '退役': 'info'
      }
      return statusMap[status]
    },
    typeFilter(type) {
      return calendarTypeKeyValue[type]
    }
  },
  data() {
    return {
      region: null,
      type: 'job',
      provinces,
      searchInput: '',
      positionType: [],
      positionList: [],
      positionOption: [],
      listLoading: true,
      listQuery: {
        type: '',
        province: '',
        city: '',
        keyword: '',
        page: 1,
        limit: 20
      },
      searchAd: []
    }
  },
  mounted() {
    this.type = this.$route.params.type
    this.searchInput = this.$route.query.keyword
    this.positionType = []
    console.log(this.$route.query)
    if (this.$route.query.type && this.$route.query.position) {
      this.positionType.push(this.$route.query.type)
      this.positionType.push(this.$route.query.position)
    }
    this.region = []
    if (this.$route.params.province && this.$route.params.city) {
      this.region.push(this.$route.params.province)
      this.region.push(this.$route.params.city)
    }
    this.getList()
    getPositionOption().then(res => { this.positionOption = res.data.items })
    getAd('search_1').then(res => {
      this.searchAd.push(res.data.items)
      getAd('search_2').then(res => { this.searchAd.push(res.data.items) })
    })
  },
  methods: {
    getList() {
      const params = Object.assign({}, this.listQuery)
      params.province = this.region[0]
      params.city = this.region[1]
      if (this.positionType.length > 1) { params.type = this.positionType[0] + this.positionType[1] }
      getPositionList(params).then(
        res => {
          this.positionList = res.data.items
          this.listQuery.total = res.data.total
        }
      )
    },
    toDetail(id) {
      window.open('#/index/positionDetail?id=' + id)
      // this.$router.push({ path: '/index/positionDetail' })
    },
    toCom(id) {
      window.open('#/index/comDetail?id=' + id)
    },
    toChat(row) {},
    handleFilter() {},
    handleModifyStatus(row, status) {},
    handleChange(value) {
      console.log(value)
    }
  }
}
</script>
<style lang="scss" scoped>
.el-icon-circle-plus-outline{
  font-weight: bold;
}
.el-icon-circle-plus-outline:hover{
  color: #5ec78f;
}
.el-icon-circle-plus-outline:active{
  color: #1a9b70;
}
.filter-container{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin: 0 20px;
  height: 50px;
  .filter-item{
    margin-right: 20px;
  }
}
.position-item{
  margin: 10px 0;
  >:first-child:hover {
    .position-item-name{
      color: #0d7251;
    }
  }
  >:last-child:hover {
    .com-name{
      color: #0d7251;
    }
  }
}

.advertisement{
  position: fixed;
  right: 15px;
  top: 170px;
  width: 170px;
  height: 400px;
  border: 1px solid #1a9b70;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  font-size: 40px;
  font-weight: bolder;
}
</style>
